<template>
  <div class="image" :style="computedStyle">
    <el-image v-if="componentData.url" :src="componentData.url" lazy></el-image>
    <el-image v-else class="default-image">
      <div slot="error" class="image-slot">
        <i class="el-icon-picture-outline"></i>
      </div>
    </el-image>
  </div>
</template>

<script>

const defaultComponentData = {
  url: '',
  widthPercent: '100%',
  padding: null,
  margin: null,
  paddingBottom: null,
  paddingLeft: null,
  paddingRight: null,
  paddingTop: null,
  marginBottom: null,
  marginLeft: null,
  marginRight: null,
  marginTop: null,
  sizeUnit: 'px',
  jumpLink: '',
  // 0 无 1 小程序页面 2 h5页面地址 3商品
  linkType: 1
}

export default {
  name: 'LpImage',
  title: '图片',
  image: require('./images/blank.png'),
  registerName: 'lp-image',
  // 定义组件有哪些属性
  defaultComponentData: defaultComponentData,
  props: {
    componentData: {
      type: Object,
      default: () => {}
    }
  },
  computed: {
    computedStyle() {
      const componentData = Object.assign(defaultComponentData, this.componentData)
      const style = {}
      this.addProperty(style, 'width', componentData.widthPercent)
      this.addProperty(style, 'padding', componentData.padding)
      this.addProperty(style, 'margin', componentData.margin)
      this.addProperty(style, 'padding-bottom', componentData.paddingBottom, componentData.sizeUnit)
      this.addProperty(style, 'padding-left', componentData.paddingLeft, componentData.sizeUnit)
      this.addProperty(style, 'padding-right', componentData.paddingRight, componentData.sizeUnit)
      this.addProperty(style, 'padding-top', componentData.paddingTop, componentData.sizeUnit)
      this.addProperty(style, 'margin-bottom', componentData.marginBottom, componentData.sizeUnit)
      this.addProperty(style, 'margin-left', componentData.marginLeft, componentData.sizeUnit)
      this.addProperty(style, 'margin-right', componentData.marginRight, componentData.sizeUnit)
      this.addProperty(style, 'margin-top', componentData.marginTop, componentData.sizeUnit)
      return style
    }
  },
  methods: {}
}

</script>
<style>
.default-image {
  width: 100%;
  height: 100px;
  line-height: 100px;
  text-align: center;
  background: #f5f7fa;
  color: #909399;
}

.el-image, image  {
  font-size: 0px;
  display: block;
}

.default-image {
  font-size: 20px;
}
</style>
